<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">班级组设置</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;width: 100%;">
				<Col span="24" style="text-align: left;display: inline-block;">
				<span style="margin: 0 10px ;">年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<Select v-model="grade" @on-change="gradeChange" style="width: 150px;text-align: center;">
					<Option v-for="item in gradeList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				
				<Button style="float: right;background-color: orange;color: white;font-size: 14px;margin: 0 45px;" @click="addteachergroup">+&nbsp;添加班级组</Button>
			</Col>
			</Row>
			<div style="min-height: 300px; padding-bottom:20px ;">
			<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
				<Col span="3" style="text-align: center;width: 10%;">
				<span style="font-size: 16px;">序号</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">班级组名称</span>
				</Col>
				<Col span="3" style="text-align: center;width: 50%;">
				<span style="font-size: 16px;">班级组成员</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">操作</span>
				</Col>
			</Row>
			<Row v-for="(item,index) in manageList" :key="item.itemId" style="margin:0 auto;margin:20px 45px 5px 45px;">
				<Col span="3" style="text-align: center;width: 10%;">
				<span style="font-size: 16px;">{{item.itemId}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
				<span style="font-size: 16px;">{{item.groupname}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 50%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
				<span style="font-size: 16px;">{{item.groupmenber}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkedit(index)">编辑&nbsp;</a>
				</Col>
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkdel(index)">删除&nbsp;</a>
				</Col>
				</Col>
			</Row>
		</div>
		<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:550px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
			<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
				<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
			</Row>
			<Row style="font-size: 15px;">
				<Col style="text-align: center;padding: 10px;">
				<span>班级组名称:</span>
				<Input v-model="classgroupname" type="text" placeholder="教研组名称" style="text-align: center; width: 60%;position: relative;"></Input>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>班级组成员:</span>
				<Input v-model="classgroupmenber" type="text" placeholder="教研组成员" style="text-align: center; width: 60%;position: relative;"></Input>
				</Col>
			</Row>
			<Row style="text-align: center;">
				<Col span="24" style="margin-top:15px">
				<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
				<Button v-if="this.title=='添加班级组'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
				<Button v-if="this.title=='编辑班级组'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
				</Col>
			</Row>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				listitemId:"",
				obj:"",
				title:"",
				grade:1,
				classgroupname:"",
				classgroupmenber:"",
				sortSettingHidden:false,
				gradeList: [{
						value: 1,
						label: "高一",
					},
					{
						value: 2,
						label: "高二",
					},
					{
						value: 3,
						label: "高三",
					},
					{
						value: 4,
						label: "初一",
					},
					{
						value: 5,
						label: "初二",
					},
					{
						value: 6,
						label: "初三",
					},
					
				],
				manageList: [{
						itemId: "01",
						groupname: "第一班级组",
						groupmenber: "邱腾宇、李昕昱、李旻函",		
					},
					{
						itemId: "02",
						groupname: "第二班级组",
						groupmenber: "王薪媛、陈宇鹏",
					},
					{
						itemId: "03",
						groupname: "第三班级组",
						groupmenber: "姜则宇、黄祖鹏、林琦龙、盛晋铭",
					},
					{
						itemId: "04",
						groupname: "第四班级组",
						groupmenber: "陈奕旭、陈子凡、林小川",
					},
					{
						itemId: "05",
						groupname: "第五班级组",
						groupmenber: "范赫乾、卢愿、李欣潼",
					},
					{
						itemId: "06",
						groupname: "第六班级组",
						groupmenber: "赵羿博、李怡然、李思源、梁和平、南迪、陈居宁",
					},
					{
						itemId: "07",
						groupname: "第七班级组",
						groupmenber: "林海天、孙荟楠、翁晟棋",
					},
					{
						itemId: "08",
						groupname: "第八班级组",
						groupmenber: "王嘉麟、张乐",
					},
					{
						itemId: "09",
						groupname: "第九班级组",
						groupmenber: "陈克枫、李心苗、王思蕲",
					},
				],
			}
		},
		methods:{
			gradeChange:function(){},
			addteachergroup:function(){
				this.title="添加班级组"
				this.sortSettingHidden=true
				this.classgroupname=""
				this.classgroupmenber=""
			},
			xkpkedit: function(index) {
				this.title="编辑班级组"
				this.obj=index
				this.sortSettingHidden=true
				this.listitemId=this.manageList[index].itemId
				this.classgroupname=this.manageList[index].groupname
				this.classgroupmenber=this.manageList[index].groupmenber
			},
			xkpkdel: function(index) {
				this.manageList.splice(index, 1)
			},
			savesort:function(){
				this.sortSettingHidden=false
				if(this.classgroupname==""&&this.classgroupmenber==""){
					alert("班级组名称和班级组成员不能为空")
				}else if(this.classgroupname==""&&this.classgroupmenber!=""){
					alert("班级组名称不能为空")
				}else if(this.classgroupname!=""&&this.classgroupmenber==""){
					alert("班级组成员不能为空")
				}else{
					this.manageList.push({
						itemId:"0"+(this.manageList.length+1),
						groupname:this.classgroupname,
						groupmenber:this.classgroupmenber,
					})
					this.sortSettingHidden=false
					alert("保存成功")
				}
			},
			cancel:function(){
				this.sortSettingHidden=false
			},
			editsavesort:function(){
				this.sortSettingHidden=false
				if(this.classgroupname==""&&this.classgroupmenber==""){
					alert("班级组名称和班级组成员不能为空")
				}else if(this.classgroupname==""&&this.classgroupmenber!=""){
					alert("班级组名称不能为空")
				}else if(this.classgroupname!=""&&this.classgroupmenber==""){
					alert("班级组成员不能为空")
				}else{
					this.manageList.splice(this.obj, 1, {
						itemId:this.listitemId,
						groupname:this.classgroupname,
						groupmenber:this.classgroupmenber,
					})
					this.sortSettingHidden=false
					alert("保存成功")
				}
			},
		},
	}
</script>

<style>
</style>